<template>
  <n-card :bordered="false" class="appearance-container tab-card">
    <n-tabs type="line" animated>
      <n-tab-pane name="home-page-style" tab="首页风格">
        <n-space vertical :size="[0,32]">
          <n-space vertical :size="0">
            <n-h2 class="text-[#00000099]">当前首页模板</n-h2>
            <n-space :size="[24,0]">
              <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc1596941e1e6552e185083f4ce977314175bb0e371e3584ee88418c615074f57"
                  alt="">
              <n-space class="h-full" vertical justify="center">
                <n-h4 class="mb-2 text-[#00000099]">主题名称：域名防红</n-h4>
                <n-h4 class="m-0 text-[#00000099]">主题作者：泡泡圈</n-h4>
              </n-space>
            </n-space>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h2 class="text-[#00000099] m-0">首页模板库</n-h2>
            <n-button size="large" type="primary">上传模板</n-button>
          </n-space>
          <n-grid x-gap="80" :cols="3">
            <n-gi>
              <n-card :bordered="false">
                <div class="template-thumbnail">
                  <img
                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga8d01cfc3b86c9aaca1aecdd9a0a1a69f79de1fbe5423970238ad1f76bb7f131"
                      alt="">
                  <div class="cover-layer">
                    <n-space justify="space-between">
                      <img
                          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng05bcba8d992126aa97d30ffa520f9ccb1988f441109f34d682a1874dda32b46f"
                          alt="">
                      <n-button type="success">设置</n-button>
                    </n-space>
                  </div>
                </div>
                <template #footer>
                  <n-space justify="space-between" align="center">
                    <n-h3 class="text-[#000000E6] m-0">防红链接美化版</n-h3>
                    <n-button type="primary" ghost size="large">启用</n-button>
                  </n-space>
                </template>
              </n-card>
            </n-gi>
            <n-gi>
              <n-card :bordered="false">
                <div class="template-thumbnail">
                  <img
                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6f765b283fe58db0b970e5c813ebb80cac623eda742d45e0de383fa0cb23696d"
                      alt="">
                  <div class="cover-layer">
                    <n-space justify="space-between">
                      <img
                          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng05bcba8d992126aa97d30ffa520f9ccb1988f441109f34d682a1874dda32b46f"
                          alt="">
                      <n-button type="success">设置</n-button>
                    </n-space>
                  </div>
                </div>
                <template #footer>
                  <n-space justify="space-between" align="center">
                    <n-h3 class="text-[#000000E6] m-0">防红链接美化版</n-h3>
                    <n-button type="primary" ghost size="large">启用</n-button>
                  </n-space>
                </template>
              </n-card>
            </n-gi>
            <n-gi>
              <n-card :bordered="false">
                <div class="template-thumbnail">
                  <img
                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng03719c14338dc2f56b604354dd44536ec4b545d35fbee4fd3f28980c8c16fcb5"
                      alt="">
                  <div class="cover-layer">
                    <n-space justify="space-between">
                      <img
                          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng05bcba8d992126aa97d30ffa520f9ccb1988f441109f34d682a1874dda32b46f"
                          alt="">
                      <n-button type="success">设置</n-button>
                    </n-space>
                  </div>
                </div>
                <template #footer>
                  <n-space justify="space-between" align="center">
                    <n-h3 class="text-[#000000E6] m-0">防红链接美化版</n-h3>
                    <n-button type="primary" ghost size="large">启用</n-button>
                  </n-space>
                </template>
              </n-card>
            </n-gi>
          </n-grid>
        </n-space>
      </n-tab-pane>
      <n-tab-pane name="jump-style" tab="跳转风格">
        <n-grid x-gap="99" :cols="3">
          <n-gi :span="2">
            <n-form size="large" label-placement="left" label-align="right" :label-width="96">
              <n-space justify="space-between" align="center">
                <n-h2 class="m-0">IOS模板设置</n-h2>
                <n-button type="primary" size="large">保存</n-button>
              </n-space>
              <n-grid class="mt-6" x-gap="64" :cols="2">
                <n-gi>
                  <n-form-item label="QQ跳转">
                    <n-select placeholder="选择QQ跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="微信跳转">
                    <n-select placeholder="选择微信跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="抖音跳转">
                    <n-select placeholder="选择抖音跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="抖音跳转">
                    <n-select placeholder="选择抖音跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="知乎跳转">
                    <n-select placeholder="选择知乎跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="支付宝跳转">
                    <n-select placeholder="选择支付宝跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="微博跳转">
                    <n-select placeholder="选择微博跳转模板"/>
                  </n-form-item>
                </n-gi>
              </n-grid>
            </n-form>
            <n-form size="large" label-placement="left" label-align="right" :label-width="96">
              <n-space justify="space-between" align="center">
                <n-h2 class="m-0">Android模板设置</n-h2>
                <n-button type="primary" size="large">保存</n-button>
              </n-space>
              <n-grid class="mt-6" x-gap="64" :cols="2">
                <n-gi>
                  <n-form-item label="QQ跳转">
                    <n-select placeholder="选择QQ跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="微信跳转">
                    <n-select placeholder="选择微信跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="抖音跳转">
                    <n-select placeholder="选择抖音跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="抖音跳转">
                    <n-select placeholder="选择抖音跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="知乎跳转">
                    <n-select placeholder="选择知乎跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="支付宝跳转">
                    <n-select placeholder="选择支付宝跳转模板"/>
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="微博跳转">
                    <n-select placeholder="选择微博跳转模板"/>
                  </n-form-item>
                </n-gi>
              </n-grid>
            </n-form>
            <n-form size="large" label-placement="left" label-align="right" :label-width="96">
              <n-space justify="space-between" align="center">
                <n-h2 class="m-0">其他模板设置</n-h2>
                <n-button type="primary" size="large">保存</n-button>
              </n-space>
              <n-grid class="mt-6" x-gap="64" :cols="2">
                <n-gi>
                  <n-form-item label="其他浏览器">
                    <n-select placeholder="选择其他浏览器模板"/>
                  </n-form-item>
                </n-gi>
              </n-grid>
            </n-form>
          </n-gi>
          <n-gi :span="1">
            <n-space vertical align="center">
              <n-h4>苹果QQ跳转模板预览</n-h4>
              <img
                  class="img2"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf81316ae281a89197ea49b251bdb77e7a21f006ab8d8196ae9dd3de3cb3e876c"
              />
            </n-space>
          </n-gi>
        </n-grid>
        <n-divider/>
        <n-space justify="space-between" align="center">
          <n-h2 class="m-0">首页模板库</n-h2>
          <n-button type="primary" size="large">上传模板</n-button>
        </n-space>
        <n-grid class="mt-8" x-gap="64" y-gap="40" :cols="5">
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng48c4a0845d1c246706ae8159bb815d940187dbe68954b85975d2afeee16058fc"
            />
            <n-h3 class="mt-4 mb-0">域名防红-苹果QQ</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf8745e9811c6a48d8e9e95e97fdfa6727f02e117d4fc0c435469965e29a079c9"
            />
            <n-h3 class="mt-4 mb-0">防红域名-苹果微信</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngead8103af92cfc6a52255880a53cb0a574b7594606fba829305a3cd004987841"
            />
            <n-h3 class="mt-4 mb-0">防红链接美化版</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb2bdd7d42448babd651419be71998158301ad9607b3d02be2fabf86a18b45565"
            />
            <n-h3 class="mt-4 mb-0">防红链接美化版-安卓</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng61a0dd9d46c3cde51a9db3e89630a122f2055d03054ea1a5cf536fe8d6a2776f"
            />
            <n-h3 class="mt-4 mb-0">分享精简版</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb2bdd7d42448babd651419be71998158301ad9607b3d02be2fabf86a18b45565"
            />
            <n-h3 class="mt-4 mb-0">防红链接美化版-安卓</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng48c4a0845d1c246706ae8159bb815d940187dbe68954b85975d2afeee16058fc"
            />
            <n-h3 class="mt-4 mb-0">域名防红-苹果QQ</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng61a0dd9d46c3cde51a9db3e89630a122f2055d03054ea1a5cf536fe8d6a2776f"
            />
            <n-h3 class="mt-4 mb-0">分享精简版</n-h3>
          </n-gi>
          <n-gi>
            <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf8745e9811c6a48d8e9e95e97fdfa6727f02e117d4fc0c435469965e29a079c9"
            />
            <n-h3 class="mt-4 mb-0">防红域名-苹果微信</n-h3>
          </n-gi>
        </n-grid>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script setup>
</script>

<style lang="less" scoped>
.appearance-container {
  min-height: calc(100vh - 112px);

  &:deep(.n-card__content) {
    .n-tabs--line-type {
      .n-tabs-pane-wrapper {
        .n-tab-pane {
          padding-top: 40px;

          .n-grid {
            .n-card {
              .n-card__content {
                padding: 0 0 20px !important;

                .template-thumbnail {
                  position: relative;
                  border-radius: 4px;
                  overflow: hidden;

                  &:hover {
                    .cover-layer {
                      display: block;
                    }
                  }

                  .cover-layer {
                    width: 100%;
                    height: 100%;
                    padding: 16px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: none;
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0) 100%);
                    cursor: pointer;
                  }
                }
              }

              .n-card__footer {
                padding: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
